<template>
	<view class="page">
		<template v-if="token&&isLogin">

			<!-- 故障详情 -->
			<template v-if="type=='1'">
				<view class="body">
					<template v-if="loadingState.default">
						<loading :loadingState="loadingState"></loading>
					</template>
					<template v-else>
						<view class="hd-title">设备信息</view>
						<view class="detail-wrap "> 
							<view class="detail-item">
								<view class="label">设备名称</view>
								<view class="detail-input">
									<view class="content">
										<view class="val">{{detail.dev_name}}</view>
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">设备地址</view>
								<view class="detail-input">
									<view class="content">
										<view class="val">{{detail.dev_address}}</view>
									</view>
								</view>
							</view>
							<!-- <view class="detail-item">
								<view class="label">故障状态</view>
								<view class="detail-input">
									<view class="content">
										<view class="val f-red">{{detail.report_state}}</view>
									</view>
								</view>
							</view> -->
							<view class="detail-item">
								<view class="label">故障描述</view>
								<view class="detail-textarea">
									<view class="content">
										{{detail.dev_state}}
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label a-t">设备图片</view>
								<view class="detail-pic">
									<view class="pic-item" v-for="(item,index) in imageList" :key="index">
										<image src="@/static/images/filter_bg.png" mode="widthFix">
											<!-- 占位 -->
										</image>
										<view class="img-wrap" @click="preview(index)">
											<image class="img" :src="item" mode="widthFix"></image>
										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="hd-title">上报人信息</view>
						<view class="detail-wrap ">
							<view class="detail-item">
								<view class="label">姓 名</view>
								<view class="detail-input">
									<view class="content">
										<view class="val">{{detail.report_name}}</view>
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">手 机</view>
								<view class="detail-input">
									<view class="content">
										<view class="val">{{detail.report_phone}}</view>
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">上报日期</view>
								<view class="detail-input">
									<view class="content">
										<view class="val">{{detail.create_time}}</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>
			</template>

			<!-- 维修详情 -->
			<template v-if="type=='2'">
				<view class="body">
					<template v-if="loadingState.default">
						<loading :loadingState="loadingState"></loading>
					</template>

					<template v-else> 
						<view class="detail-wrap "> 
							<view class="detail-item">
								<view class="label">设备名称</view>
								<view class="detail-input">
									<view class="content">
										<view class="val">{{detail.cust_name}}</view>
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">工作人员</view>
								<view class="detail-input">
									<view class="content">
										<view class="val">{{detail.worker_name}}</view>
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">售后类型</view>
								<view class="detail-input">
									<view class="content">
										<view class="val">{{detail.work_job}}</view>
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">售后情况</view>
								<view class="detail-input">
									<view class="content">
										<view class="val f-red">{{detail.deal_result}}</view>
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">过程描述</view>
								<view class="detail-textarea">
									<view class="content">
										{{detail.work_job}}
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">维修日期</view>
								<view class="detail-input">
									<view class="content">
										<view class="val">{{detail.create_time}}</view>
									</view>
								</view>
							</view>
							
							<view class="detail-item">
								<view class="label a-t">售后图片</view>
								<view class="detail-pic">
									<view class="pic-item" v-for="(item,index) in imageList" :key="index">
										<image src="@/static/images/filter_bg.png" mode="widthFix">
											<!-- 占位 -->
										</image>
										<view class="img-wrap" @click="preview(index)">
											<image class="img" :src="item" mode="widthFix"></image>
										</view>
									</view>
								</view>
							</view>
						</view> 
					</template>
				</view>
			</template>

		</template>
	</view>
</template>

<script>
	import {
		previewImage
	} from '@/common/util.js'
	import loading from '@/components/loading-more.vue'
	export default {
		name: '',
		data() {
			return {
				type: '',
				id: '',
				appid: getApp().globalData.appid,
				token: uni.getStorageSync('token'),
				isLogin:false,
				loginStateUpdate: false,
				detail: {},
				image_path: getApp().globalData.image_path,
				imageList: [],
				loadingState: {
					default: true
				},
			}
		},
		async onLoad(params) {
			console.log(params)
			this.id = params.id;
			this.type=params.type;

			if (this.type == 1) { 
				uni.setNavigationBarTitle({
					title: '故障详情'
				})
			} else if (this.type == 2) { 
				uni.setNavigationBarTitle({
					title: '售后详情'
				})
			}

			// 登录状态发生请求
			if(this.token){
				this.isLogin=await this.$loginState('check');  
				if(this.isLogin){ 
					if (this.type == 1) {
						this.getOneReportInfo();
					} else if (this.type == 2) {
						this.getOneRepairsInfo();
					}
				}else{
					this.isLogin=await this.$loginState('reset');
				}
			} 
			
			 
		},
		async onShow() {
			if (this.loginStateUpdate) {
				this.token = uni.getStorageSync('token');
				this.userInfo=uni.getStorageSync('userInfo');
				if (this.type == 1) {
					this.getOneReportInfo();
				} else if (this.type == 2) {
					this.getOneRepairsInfo();
				}
				this.loginStateUpdate = false;
			}
			
			if(!this.token&&!this.isLogin){
				this.isLogin=await this.$loginState('reset'); 
			}
		},
		methods: {

			// 获取故障详情
			getOneReportInfo: async function() {
				let res = await this.$api.tool_api.reportInfoDetail({
					appid: this.appid,
					token: this.token,
					id: this.id
				})
				console.log(res)
				if (res.data.ret == 1000) {
					this.loadingState.default = false;
					res.data.data.filelist.forEach(item => {
						this.imageList.push(this.image_path + item.file_path + '&type=3');
					})
					
					this.detail = res.data.data; 
				}
				console.log(res)
			},

			// 获取维修详情
			getOneRepairsInfo: async function() {
				let res = await this.$api.tool_api.repairsInfoDetail({
					appid: this.appid,
					token: this.token,
					id: this.id
				})
				console.log(res)
				if (res.data.ret == 1000) {
					this.loadingState.default = false;
					res.data.data.filelist.forEach(item => {
						this.imageList.push(this.image_path + item.file_path + '&type=2');
					})

					this.detail = res.data.data;
				}
				console.log(res)
			},

			// 预览图片
			preview: function(index) {
				previewImage({
					data: this.imageList,
					index: index
				})
			}

		},
		computed: {

		},
		components: {
			loading
		},
	}
</script>

<style lang="less">
	.hd-title {
		padding: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
</style>
